OpenEdge Development:<br />Progress 4GL Handbook Changing a fill-in field to an editor

Now you’ll add a field to the screen with a different visualization. The Comments field in the Customer table is a text field that can get fairly long, but its default display (as defined in the Data Dictionary) is just as a fill-in. You can add it to the screen and then change it to an editor, which is a more appropriate way to display the information.

Before you go any further, you should change the query on the Customer table so that it doesn’t just show New Hampshire Customers sorted by the City. In the sports2000 database, most of the fill-in field Comments values are toward the beginning of the Customers, so to see meaningful data in the field you need to look at Customers toward the beginning of the table.

Double-click on the design window (outside of any field) to go into the property sheet for the frame.

Click the Query button and edit the WHERE clause and the SORT phrase out of the query. You should know how to do this from using the Query Builder in Chapter 4, " Introducing the OpenEdge AppBuilder."

Exit the Query Builder and extend the design window to the right by dragging the window edge with the mouse, to make room for new fields.

Click the DB Fields button in the AppBuilder Palette window:

Click on an empty space on the right side of the design window.

Select Customer in the Table Selector dialog box, then click OK.

Add the Comments field in the Multi-Field Selector dialog box that appears, and then click OK.

The field now appears as a long fill-in field in your design window. It’s even possible you could get a warning message that the field is too long to allow the label to be displayed. That’s not a problem, since an editor doesn’t have a label anyway.

With the Comments field still selected in the design window, open the Properties Window.

Select the Type line in the display. This shows the current display type (Fill-In) in a combo-box at the top of the window.

Drop down this list and select Editor:

Click the green check mark and close the window. Now your Comments field is an editor.

Using the Properties Window to change a display type

Normally, the Properties Window is an alternative way to set field attributes, instead of just using the AppBuilder property sheet dialog boxes that you’ve seen. The main advantage of using it is that you can set common field properties for multiple fields at a time, as you saw earlier.

But in this case, the only way to change the display type of a field after you’ve dropped it onto the design window is in the Properties Window. The AppBuilder property sheets for different display types are different, so you can’t actually change the display type from the property sheet. But now that you’ve changed the display type in the Properties Window, you can set its editor-specific attributes.

Double-click on the editor field to open the property sheet.

Check the toggle boxes for these attributes:

Enable — Even though you won’t allow the user to change the value, checking on this toggle box makes the contrast between the displayed text and the background greater, so the text is more readable. This is an important consideration since, depending on the color combinations, it is possible wind up with a disabled editor with text that is gray on gray and therefore invisible!

Read-Only — This option keeps the value from being changed even though it is displayed as enabled.

Scrollbar-Vertical — This option gives you a scrollbar on the right-hand side of the editor if the value gets too long to display. This is another reason to mark the editor as Enabled. If it is not, then the user can’t use the scrollbar.

Word-Wrap — This option wraps whole words from one line to the next, rather than extending the text off the editor to the right. You should normally select this option if you use a vertical scrollbar.

Click OK to exit the property sheet.

Resize the editor as you like, to have multiple lines of display.

Run the window and click the Next button to see what happens.

The Comments field value is displayed properly for the first Customer, but it doesn’t change when you click the Next button. What went wrong? The AppBuilder regenerated the enable_UI procedure with its field list, to include the Comments field in its initial display. But the trigger blocks on the four buttons is code you copied from enable_UI earlier, so it didn’t get changed automatically.

You don’t want to have to keep editing this field list, so you’re better off substituting the preprocessor value that the AppBuilder keeps up to date as the field list changes. This is the DISPLAYED-FIELDS preprocessor.

The next section describes how to use the Section Editor to go into each of the four button triggers, remove the field list from the DISPLAY statement, and substitute the preprocessor value for it.

Using the Section Editor’s pop-up menu to insert a value

The Section Editor helps you insert a preprocessor value or other text into your procedures and triggers by giving you access to a number of useful lists of elements you might need in your code. These include database fields, event names, and more.

Select the first button in the design window, then click the Edit Code icon from the AppBuilder toolbar to open the Section Editor.

In the Section Editor window, place the cursor after the DISPLAY statement, then right-click.

From the pop-up menu, select Insert

Preprocessor Name:

In the Code References dialog box, double-click on the DISPLAYED-FIELDS preprocessor to insert it into the code:

Repeat Steps 1 to 4 for the other three button triggers.

Now when you run the window you should see the proper Comments field for each Customer:

Looking at the code that defines the editor

Finally, look at the code the AppBuilder generated to define the Comments field as an editor. Because this is a database field, and not a variable, the definition is in the DEFINE FRAME statement. To see this, you’ll need to go into the Code Preview window (press F5):